<template>
	<view class="content">
		<view class="message-top">
			<view class="margin-left">共{{count}}条</view>
			<view class="flex align-center margin-right" style="color: #999999;" @tap="clear">
				<image class="margin-right" style="width: 16px;height: 16px"
					:src="`${$hd.baseUrl}/images/icon-clear.png`" alt="" />
				<view>全部已读</view>
			</view>
		</view>
		<view v-if="messageList.length>0" class="info-box margin" v-for="(item,index) in messageList" :key="index"
			@tap="goMessageInfo(item)">
			<view style="padding: 5px;text-align: center;color: #CCCCCC">
				{{ item.createTime }}
			</view>
			<view class="bg-white flex padding radius-lg ov-h">
				<view style="width: 100%">
					<view class="first_text">
						<view class="message_text">{{ item.content }}</view>
						<view v-if="item.isRead==0" style="font-size:14px;color: red">未读<span class="dot">&nbsp;</span>
						</view>
						<view v-if="item.isRead==1" style="font-size:14px;color: #CCCCCC">已读</view>
					</view>
					<view id="abSine" class="abstract">
						<text-line :content="item.content"></text-line>
					</view>
					<view class="detail_text">
						<view :class="theme=='fs'?'text-blue':'text-green'">查看详情</view>
						<view style="font-size: 12px;color: #EEEEEE"> > </view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="messageList.length==0" class="info-box flex justify-center margin">暂无消息</view>
	</view>
</template>

<script>
	import TextLine from "./components/TextLine";
	import { mapGetters } from 'vuex'

	export default {
		components: {
			TextLine
		},
		computed: {
			...mapGetters(['theme'])
		},
		data() {
			return {
				messageList: [],
				type: "",
				count: 0
			}
		},
		onShow() {
			if (this.theme == 'farmer') {
				uni.setNavigationBarColor({
					backgroundColor: '#0BCA89',
					frontColor: '#ffffff'
				});
			} else {
				uni.setNavigationBarColor({
					backgroundColor: '#006BFE',
					frontColor: '#ffffff',
				});
			}
			this.getMessageList();
			this.count = this.$store.state.message.unreadCount
		},
		methods: {
			goMessageInfo(row) {
				// 检查订单是否有效
				this.$http.get(`/cadre/assignOrder/check/${row.orderId}`)
					.then((res) => {
					if (res.code === 200) {
						console.log("订单检查通过");
						this.handleMessageLogic(row);
					} else if (res.code === 500) {
						console.log(1111);
						uni.$uv.toast(res.msg || '操作失败');
						return; 
					} else {
						uni.$uv.toast(res.msg || '操作失败');
						return; 
					}
				})
			},
			handleMessageLogic(row) {
				if (row.isRead == 0) {
					this.$http.get('/socketMsg/isRead', {
						params: {
							"id": row.id
						}
					}).then(res => {
						let now = this.$store.state.message.unreadCount - 1;
						this.$store.commit("message/add", now);
					})
				}
				if (row.messageType == 2) {
					if (!row.orderId) {
						uni.$uv.toast("订单不存在！")
						return;
					}
					
					const url = row.content && row.content.includes("认证") ?
						(this.theme == 'fs'?"/subPages/pages/authInfo/index": '/subPages/pages/authInfo/FarmerAuth') :
						`/pages/taskDetail/index?id=${row.orderId}`;
					return uni.navigateTo({
						url
					});
				} else if (row.messageType == 3) {
					this.$store.commit('fetchPendingTransfers')
				} else if (row.messageType == 4) {
					if (this.theme == 'fs') {
						uni.navigateTo({
							url: '/subPages/pages/authInfo/index'
						});
					} else {
						uni.navigateTo({
							url: '/subPages/pages/authInfo/FarmerAuth'
						});
					}
				}

			},
			//获取消息列表
			getMessageList() {
				// this.$http.get('/socketMsg/selectAll').then(res => {
				this.$http.get('/socketMsg/selectAll',{ params: { theme: this.theme } }).then(res => {
					//消息类型 1--客服消息，2--订单消息，3--支付消息，4--系统消息
					if (res.data) {
						let result = res.data.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
						this.messageList = result.filter(item => item.messageType !== "1");
					}
				})
			},
			//清除所有未读消息
			clear() {
				if (this.count > 0) {
					this.$http.get('/socketMsg/isReadAll').then(res => {
						if (res.code != 200) {
							uni.$uv.toast(res.msg)
							return;
						}
						this.getMessageList();
						//清空消息中心未读数
						this.$store.commit("message/add", 0)
					})
				}
			},
		}
	}
</script>

<style scoped>
	.content {
		background-color: #F3F4F5;
	}

	.message-top {
		display: flex;
		width: 100%;
		height: 40px;
		align-items: center;
		justify-content: space-between;
		padding: 5px;
	}

	.first_text {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.message_text {
		width: 80%;
		font-size: 18px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.abstract {
		color: #999999;
		font-size: 14px;
		margin-top: 18px;
		width: 100%;
	}

	.detail_text {
		margin-top: 18px;
		width: 100%;
		border-top: 1px solid #EEEEEE;
		padding-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dot {
		vertical-align: text-top;
		display: inline-block;
		margin-left: 4px;
		background-color: red;
		border-radius: 50%;
		width: 8px;
		height: 8px;
	}
</style>